<template>
  <div class="fullMain">
    <!--插入验证提示框-->
    <div v-transfer-dom>
      <alert v-model="isShowAlert">{{ alertText }}</alert>
    </div>
    <div class="contentAll">
      <!-- 任务列表 -->
      <div v-if="allTasks == null">暂无任何任务管理，右下角新增试试吧</div>
      <ul class="taskListsWrap" v-else>
        <li
          class="taskLists"
          v-for="(item, index) in allTasks"
          :key="index"
          @click="goalsToAchived(item)"
        >
          <TaskCard
            :taskItem.sync="item"
            :isOverview.sync="isOverview"
          ></TaskCard>
        </li>
      </ul>
    </div>
    <div class="editButton" >
      <span>
        <img src="~static/img/report/details.png" height="30" width="30" alt @click="showTaskViews" />
        <img src="~static/img/report/add.png" height="30" width="30" alt @click="showEditFun" />
      </span>
    </div>
  </div>
</template>

<script>
import { XHeader } from "vux";
import { mapState } from "Vuex";
import TaskCard from "components/TaskCard/TaskCard.vue";
import task from "api/task";

export default {
  name: "TaskManage",
  components: {
    TaskCard,
    XHeader,
  },
  data() {
    return {
      isShowAlert: false,
      alertText: "",
      allTasks: [],
      isOverview: true,
    };
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo,
    }),
  },
  watch: {},
  mounted() {
    this.getAllTasks();
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    showAlert(alertText) {
      this.isShowAlert = true;
      this.alertText = alertText;
    },
    closeTip() {
      this.isShowAlert = false;
      this.alertText = "";
    },
    async getAllTasks() {
      const result = await task.postAllEnteredTask(this.userInfo.userId);
      this.allTasks = result.data;
    },
    // 点击待完成目标
    async goalsToAchived(item) {
      localStorage.setItem("taskItem", JSON.stringify(item));
      this.$router.push({ name: "TaskView" });
    },
    showEditFun() {
      this.$router.push({ name: "CreateTask" });
    },
    showTaskViews(){
      this.$router.push({ name: "TaskViewsDetail" });
    }
  },
};
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}
.contentAll {
  width: 100%;
  border-radius: 20px;
  z-index: 200;
  div {
    text-align: center;
  }
  .taskListsWrap {
  }
}
.editButton {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 5px;
  background-color: white;
  span {
    img {
      border: 1px solid #32C3A7;
      padding: 5px;
    }
  }
}
</style>
